<template>
  <div class="page-cookbook-list">
    <ListItem v-for="(item, $index) in list" :item="item" :key="$index" />
    <Spin size="large" fix v-if="spinShow"></Spin>
	<Row>
		<Col class="demo-spin-col" span="24">
            <Spin>
                <Icon type="ios-loading" size=20 class="demo-spin-icon-load"></Icon>
                <div>加载中...</div>
            </Spin>
        </Col>
	</Row>
  </div>
</template>

<script>
import ListItem from '~/components/cookbook/ListItem'
import { OSS_HOST } from '~config'
import axios from 'axios'
export default {
	data() {
		return {
			spinShow: true
		}
	},
	asyncData ({ params }) {
		return axios.get(`${OSS_HOST}data/list.json`)
		.then((res) => {
		  	return { list: res.data, spinShow: false }
		})
	},
	head() {
        return {
            title: '菜谱列表'
        }
    },
	components: {
		ListItem
	},
	mounted () {
        // this.$store.commit('base/CHANGE_LOADING_STATE', false)
    }

}
</script>

<style lang="less" scoped>
	.page-cookbook-list{
		.demo-spin-icon-load{
			animation: ani-demo-spin 1s linear infinite;
		}
		@keyframes ani-demo-spin {
			from { transform: rotate(0deg);}
			50%  { transform: rotate(180deg);}
			to   { transform: rotate(360deg);}
		}
		.demo-spin-col{
			height: 100px;
			position: relative;
			border: 1px solid #eee;
		}
	}
</style>